<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    rentTypeList: {
      type: Array,
      default: () => []
    },
    roomNumList: {
      type: Array,
      default: () => []
    }
  })
  // 选择出租类型
  const onSelectRentType = (item) => {
    if (item.id === 0) {
      props.rentTypeList.forEach((item) => {
        item.isSelected = false
      })
      item.isSelected = true
      return
    }
    // 取反
    item.isSelected = !item.isSelected
    // 不限取消选择
    props.rentTypeList[0].isSelected = false
  }

  // 选择房间数量
  const onSelectRoomNum = (item) => {
    // 点击不限
    if (item.id === 0) {
      props.roomNumList.forEach((item) => {
        item.isSelected = false
      })
      item.isSelected = true
      return
    }
    item.isSelected = !item.isSelected
    props.roomNumList[0].isSelected = false
  }

  // 选择的出租类型列表
  const selectedRentList = computed(() => {
    return props.rentTypeList.filter((item) => item.isSelected)
  })
  // 选择的房间数量列表
  const selectedRoomList = computed(() => {
    return props.roomNumList.filter((item) => item.isSelected)
  })

  defineExpose({
    selectedRentList,
    selectedRoomList
  })
</script>

<template>
  <view class="filter-by-type">
    <!-- 租房类型 -->
    <view class="filter-by-rent-type">
      <view class="filter-by-type-title"> 租房类型 </view>
      <view class="filter-by-rent-type-list">
        <view
          class="filter-by-rent-type-item filter-cell-item"
          v-for="item in props.rentTypeList"
          :key="item.id"
          :class="{ active: item.isSelected }"
          @click="onSelectRentType(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="filter-by-house-type">
      <view class="filter-by-type-title"> 居室 </view>
      <view class="filter-by-house-type-list">
        <view
          class="filter-by-house-type-item filter-cell-item"
          v-for="item in props.roomNumList"
          :key="item.id"
          :class="{ active: item.isSelected }"
          @click="onSelectRoomNum(item)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .filter-by-type {
    padding-bottom: 40rpx;
    &-title {
      margin: 30rpx 0;
      font-size: var(--font-size-md);
      font-weight: 600;
      color: var(--text-color-dark);
    }
    .filter-by-rent-type-list,
    .filter-by-house-type-list {
      display: flex;
      flex-wrap: wrap;
    }
  }
</style>
